
Vue.component('modal',{

    /*
    * 由于作用域的关系,这模板里面没有id==root的node,要夸组件通信,需要使用emit('事件名')语法
    *例如: 这里发射了一个叫'close'的事件
    *
    * */


    template: `


<div class="modal is-active" id="modalRoot">


  <div class="modal-background"></div>

    <div class="modal-content">
        <div class="box">
         <p><slot></slot></p>
        </div>
  </div>
  <button class="modal-close is-large" aria-label="close" @click="$emit('close');"></button>

</div>

`

});



/*
*
* 为了演示,操作同一个变量, 把root定义写到这里,根据'谁用谁管理'的原则一般写到外面
*
*
*
* */

new Vue({

    el:'#root',

    data : {

        isShowModal:false

    },

    methods: {
        showAlert () {
            window.alert('sasdsdsddd');
        }

    }

});
